/**
 * 页面头部导航组件
 * 包含导航菜单、响应式菜单、滚动效果等
 */

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { sections } from "../../data/homeData";

interface HeaderProps {
    activeSection: string;
    onScrollToSection: (sectionId: string) => void;
}

export default function Header({ activeSection, onScrollToSection }: HeaderProps) {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const headerRef = useRef<HTMLElement>(null);

    useEffect(() => {
        const handleScroll = () => {
            if (headerRef.current) {
                const scrollPosition = window.scrollY;
                if (scrollPosition > 50) {
                    headerRef.current.classList.add("bg-white/90", "backdrop-blur-sm", "shadow-md");
                    headerRef.current.classList.remove("bg-transparent");
                } else {
                    headerRef.current.classList.remove("bg-white/90", "backdrop-blur-sm", "shadow-md");
                    headerRef.current.classList.add("bg-transparent");
                }
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const handleMenuClick = (sectionId: string) => {
        setIsMenuOpen(false);
        onScrollToSection(sectionId);
    };

    return (
        <header
            ref={headerRef}
            className="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent py-4 px-6">
            <div className="max-w-7xl mx-auto flex justify-between items-center">
                {/* Logo */}
                <div className="flex items-center space-x-2">
                    <div className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
                        <i className="fa-solid fa-brain text-white"></i>
                    </div>
                    <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
                        AI简历解析
                    </span>
                </div>
                
                {/* 桌面导航菜单 */}
                <nav className="hidden md:flex items-center space-x-8">
                    {sections.map(section => (
                        <button
                            key={section.id}
                            onClick={() => onScrollToSection(section.id)}
                            className={`text-sm font-medium transition-colors hover:text-indigo-600 ${
                                activeSection === section.id 
                                    ? "text-indigo-600 border-b-2 border-indigo-600 pb-1" 
                                    : "text-gray-600"
                            }`}>
                            {section.title}
                        </button>
                    ))}
                </nav>
                
                {/* 移动端菜单按钮 */}
                <button
                    className="md:hidden text-gray-700 focus:outline-none"
                    onClick={() => setIsMenuOpen(!isMenuOpen)}>
                    <i className={`fa-solid ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`}></i>
                </button>
            </div>
            
            {/* 移动端菜单 */}
            <AnimatePresence>
                {isMenuOpen && (
                    <motion.div
                        initial={{
                            opacity: 0,
                            height: 0
                        }}
                        animate={{
                            opacity: 1,
                            height: "auto"
                        }}
                        exit={{
                            opacity: 0,
                            height: 0
                        }}
                        className="md:hidden absolute top-full left-0 right-0 bg-white shadow-lg mt-2 rounded-b-lg overflow-hidden">
                        <div className="flex flex-col p-4 space-y-3">
                            {sections.map(section => (
                                <button
                                    key={section.id}
                                    onClick={() => handleMenuClick(section.id)}
                                    className={`py-2 px-4 rounded-lg text-left transition-colors ${
                                        activeSection === section.id 
                                            ? "bg-indigo-50 text-indigo-600 font-medium" 
                                            : "text-gray-600 hover:bg-gray-50"
                                    }`}>
                                    {section.title}
                                </button>
                            ))}
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </header>
    );
}